<template>
	<view class="item">
		<image :src="IP + info.url" mode="aspectFill"></image>
		<view class="info">
			<view class="header">
					<span>{{info.name}}</span>
					<view class="number">
						<image src="../../../../static/me/number.png"></image>
						<view>{{info.number}}</view>
					</view>
			</view>
			<view class="init" :class="{have: info.status==1}" @click="conversion">兑换({{info.integral}})</view>
		</view>
	</view>
</template>

<script>
	import {
		IP
	} from '../../../../network/requestUrl.js'
	import {
		exchangeProduct
	} from '../../../../network/me.js'
	export default {
		props: {
			info: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		data() {
			return {
				IP
			};
		},
		methods: {
			conversion() {
				uni.showModal({
					title: '您确定兑换吗',
					confirmText: '确定',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							const result = await exchangeProduct(this.info.id, '家属1')
							console.log(result)
							if (!result.flag) return
							uni.showToast({
								title: '兑换成功'
							})
							setTimeout(() => this.$emit('success'), 1000)
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		// padding: 10px;
		border-left: 8px solid #F8F8F8;
		border-right: 8px solid #F8F8F8;
		border-bottom: 8px solid #F8F8F8;
		background-color: white;
		image {
			width: 100%;
			border-radius: 5px;
		}
		
		.info {
			padding: 10px;
			
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.number {
					display: flex;
					align-items: center;
					color: #999999;
					
					image {
						width: 15px;
						height: 15px;
						margin-right: 5px;
					}
				}
			}
			
			.init {
				width: 80%;
				margin: 10px auto;
				text-align: center;
				border-radius: 5px;
				padding: 5px 0;
				color: white;
				&:active {
					background-color: #CCCCCC;
				}
			}
			
			.have {
				background-color: #1CBAB6;
				// background-color: rgb(28, 186, 182);
			}
		}
	}
</style>
